<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>任务日历</title>
	<link rel="stylesheet" type="text/css" href="${APP_PATH}/static/fullcalendar/css/fullcalendar.min.css">
	<link rel="stylesheet" type="text/css" href="${APP_PATH}/static/fullcalendar/css/fullcalendar.print.min.css" media='print'>
	<script type="text/javascript" src="${APP_PATH}/static/fullcalendar/js/moment.min.js"></script>
	<script type="text/javascript" src="${APP_PATH}/static/jquery/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="${APP_PATH}/static/fullcalendar/js/fullcalendar.min.js"></script>
	<script type="text/javascript" src="${APP_PATH}/static/fullcalendar/js/locale-all.js"></script>
	<script type="text/javascript" src="${APP_PATH}/static/fullcalendar/js/locale/zh-cn.js"></script>
	
	<style>
	body {
		margin: 0px 0px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}
	#script-warning {
		display: none;
		background: #eee;
		border-bottom: 1px solid #ddd;
		padding: 0 10px;
		line-height: 40px;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		color: red;
	}

	#loading {
		display: none;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	#calendar {
		max-width: 900px;
		margin: 0px auto;
		padding: 0 10px;
	}
</style>
</head>
<script>

	$(document).ready(function() {

		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaDay,agendaWeek,listMonth'
			},
			locale: 'zh-cn',
			//defaultDate: '2017-06-12',
			navLinks: true, // can click day/week names to navigate views
			businessHours: true, // display business hours
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			events: [
				{
					title: 'Business Lunch',
					start: '2017-06-03T13:00:00',
					constraint: 'businessHours'
				},
				{
					title: 'Meeting',
					start: '2017-06-13T11:00:00',
					constraint: 'availableForMeeting', // defined below
					color: '#257e4a'
				},
				{
					title: 'Conference',
					start: '2017-06-18',
					end: '2017-06-20'
				},
				{
					title: 'Party',
					start: '2017-06-29T20:00:00'
				},

				// areas where "Meeting" must be dropped
				{
					id: 'availableForMeeting',
					start: '2017-06-11T10:00:00',
					end: '2017-06-11T16:00:00',
					rendering: 'background'
				},
				{
					id: 'availableForMeeting',
					start: '2017-06-13T10:00:00',
					end: '2017-06-13T16:00:00',
					rendering: 'background'
				},

				// red areas where no events can be dropped
				{
					start: '2017-06-24',
					end: '2017-06-28',
					overlap: false,
					rendering: 'background',
					color: '#ff9f89'
				},
				{
					start: '2017-06-06',
					end: '2017-06-08',
					overlap: false,
					rendering: 'background',
					color: '#ff9f89'
				}
			]
		});
		
	});

</script>
<body>
	<div id='script-warning'>
		<code>后台服务异常</code> must be running.
	</div>

	<div id='loading'>loading...</div>
	<div id='calendar'></div>
</body>
</html>